<template>
	<!-- 弹窗遮罩层 -->
	<view class="popup-overlay" v-show="visible" @click="handleOverlayClick">
		<!-- 弹窗内容容器 -->
		<view class="popup-container" :class="[type]" @click.stop>
			<slot></slot>
		</view>
	</view>
</template>

<script>
/**
 * 简单弹窗组件
 * 支持居中、底部、顶部三种显示模式
 * 提供插槽用于自定义内容
 */
export default {
	name: 'SimplePopup',
	
	props: {
		/** 弹窗显示类型 */
		type: {
			type: String,
			default: 'center',
			validator: value => ['center', 'bottom', 'top'].includes(value)
		}
	},
	
	data() {
		return {
			/** 是否显示弹窗 */
			visible: false
		}
	},
	
	methods: {
		/**
		 * 打开弹窗
		 */
		open() {
			this.visible = true
			this.$emit('open')
		},
		
		/**
		 * 关闭弹窗
		 */
		close() {
			this.visible = false
			this.$emit('close')
		},
		
		/**
		 * 处理遮罩层点击事件
		 * 点击遮罩层关闭弹窗
		 */
		handleOverlayClick() {
			this.close()
		}
	}
}
</script>

<style lang="scss" scoped>
/* 弹窗遮罩层 */
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 弹窗内容容器 */
.popup-container {
	background: #FFFFFF;
	border-radius: 12px;
	max-width: 90%;
	max-height: 80%;
	overflow: hidden;
	
	/* 底部弹窗样式 */
	&.bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		max-width: 100%;
		border-radius: 16px 16px 0 0;
	}
	
	/* 顶部弹窗样式 */
	&.top {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		max-width: 100%;
		border-radius: 0 0 16px 16px;
	}
}
</style> 